<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<i @click="togoBack">&#8249;</i>
			<p>支付</p>
		</header>

		<div class="shangbiao">
			<img src="../assets/xiaohui.png">
		</div>

		<!-- 表单部分 -->
		<div class="form-box">

			<div class="title">
				支付状态：
			</div>
			<div class="content">
				支付成功
			</div>

		</div>
		<!-- 底部菜单部分 -->
		<Footer> </Footer>
	</div>

</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'PaymentResult',
		methods: {
			togoBack() {
				// 返回上一页
				this.$router.push({
					path: '/index'
				});
			}
		},
		components: {
			Footer
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		position: absolute;
		top: 25vw;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		align-items: center;
	}

	.wrapper header i {
		font-size: 10vw;
		user-select: none;
	}

	.wrapper header p {
		margin-left: 35vw;
	}

	.wrapper .shangbiao {
		width: 100vw;
		height: 25vw;
		display: flex;
		justify-content: center;
	}



	/****************** 表单部分 ******************/
	.wrapper .form-box {
		width: 100%;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
	}

	.wrapper .form-box .title {
		font-size: 5vw;
		font-weight: 700;
		color: #666;
	}


	.wrapper .form-box .content {
		font-size: 4vw;
		margin-top: 0.5vw;
	}
</style>